<script setup lang="ts">
// 此视频来自 coverr.co 视频网站
import { COVERR_VIDEO } from '~/assets/temp/temp'

const wh = ref(0)
const onResize = () => {
  const h = document.documentElement.clientHeight
  wh.value = h
}
onResize()

const videoRef = ref()
const changeHeaderColor = ref(false)
const onScroll = () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  const ch = document.body.clientHeight
  // 滚动高度 大于 可移动高度则改变菜单头部
  if (scrollTop >= (ch - 80)) {
    changeHeaderColor.value = true
    // 视频暂停
    videoRef.value.pause()
  }
  else {
    changeHeaderColor.value = false
    // 视频播放
    videoRef.value.play()
  }
}
onMounted(() => {
  window.addEventListener('resize', onResize, false)
  window.addEventListener('scroll', onScroll, false)
})

onUnmounted(() => {
  window.removeEventListener('resize', onResize)
  window.removeEventListener('scroll', onScroll)
})
</script>

<template>
  <!-- 鼠标悬停在 e-header 自定义组件上没有提示, 有时候需要重启 vscode 才能生效 -->
  <!-- 组件没有默认值时，在其他地方使用会提示缺少参数 -->
  <EHeader :style="changeHeaderColor ? { 'background-color': 'black' } : ''" />

  <section class="video">
    <!-- ref 可以获取到 video 元素原生属性 -->
    <video ref="videoRef" loop autoplay muted :src="COVERR_VIDEO" />
    <div class="mask">
      <section>
        <h1>从开始入门</h1>
        <h6>有点东西，但东西不多</h6>
      </section>
    </div>
  </section>

  <section id="id0" :style="{ 'margin-top': `${wh}px` }" class="content">
    <h1>{{ wh }}</h1>
    <p v-for="n in 10" :key="n">
      first {{ n }}
    </p>
  </section>

  <section v-for="item in 10" :id="`id${item}`" :key="item" :class="`content-${item}`" class="content">
    <p v-for="n in 10" :key="n">
      {{ item }} - {{ n }}
    </p>
  </section>
</template>

<style scoped lang="scss">
.video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;

  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(12, 12, 13, 0.5);

    // flex 布局
    display: flex;
    // 内容水平居中
    justify-content: center;
    // 垂直居中
    align-items: center;

    color: white;
    font-size: 30px;
  }
}

.content {
  position: relative;
  z-index: 2;
  background-color: white;
}

// 为了看清视频暂停 让 content-1 元素背景透明
.content-1 {
  background-color: transparent;
}
</style>
